<!-- 事件修饰符 -->
<!-- 
  事件修饰符
  1.stop 单击事件停止传递(阻止冒泡)
  2.prevent 阻止防止 浏览器的自我反应
  3.self 由元素本身触发
  4.once 事件值触发一次
  5.passive 提前通知浏览器不会阻止默认事件(无需浏览器去查询是否阻止默认事件)
 -->
<script setup lang="ts">
const buttonClick = style => {
  console.log(style)
}
const buttonClickOnce = style => {
  console.log(style)
}
</script>

<template>
  <button @click.stop="buttonClick('stop')">stop</button>
  <button @click.prevent="buttonClick('prevent')">prevent</button>
  <button @click.once="buttonClickOnce('once')">once</button>
</template>

<style lang="scss" scoped></style>
